<template>
    <div class="cartcontrol">
        <transition name="move">
            <div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="decreaseCart">-</div>
        </transition>
        <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
        <div class="cart-add" @click.stop.prevent="addCart">+</div>
    </div>
</template>

 <script type="text/ecmascript-6">
    import Vue from 'vue';
    export default {
        props: {
            food: {
                type: Object
            }
        },
        methods: {
            addCart(event) {
                if(!event._constructed){
                    return;
                }
                if (!this.food.count) {
                    Vue.set(this.food,'count',1)
                } else {
                    this.food.count++;
                }
            },
            decreaseCart(event) {
                if(!event._constructed){
                    return;
                }  
                if (!this.food.count) {
                    Vue.set(this.food,'count',0)
                } else {
                    this.food.count--;
                }
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .cartcontrol
        font-size: 0
        .cart-decrease
            display: inline-block
            padding: 6px
            line-height: 24px
            font-size: 24px
            transition: all 0.3s cubic-bezier(1.0, 0.5, 0.8, 1.0)
            &.move-enter
                transform: translateX(24px)
                opacity: 1
            &.move-leave-to
                transform: translateX(24px)
                opacity: 0
        .cart-count
            display: inline-block
            vertical-align: top
            width: 12px
            padding-top: 6px
            line-height: 24px
            text-align: center
            font-size: 10px
            color: rgb(147,153,159)
        .cart-add
            display: inline-block
            padding: 6px
            line-height: 24px
            font-size: 24px

</style>